<template>
    <div class="userGroupPage">
        <header>用户组</header>
        <el-main class="main">
            <el-button type="primary" icon="el-icon-plus" @click="addGroup">新增用户组</el-button>
            <el-table
                class="table"
                :data="tableData"
                height="85%"
                v-loading="loading"
                style="width: 100%; margin-top: 15px"
            >
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="user_group_name" label="用户组名称"></el-table-column>
                <el-table-column prop="user_group_remark" label="备注"></el-table-column>
                <el-table-column prop="addtime" label="添加时间"></el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <span class="btn">
                            <el-button size="mini" @click="editGroup(scope.row)">编辑</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pageAtion"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-size="10"
                layout="prev, pager, next"
                background
                :total="total"
            ></el-pagination>
        </el-main>
    </div>
</template>

<script>
import Service from "../../services/main";
export default {
    name: "UserGroup",
    data() {
        return {
            headTit: "新增用户组",
            dialogVisible: false,
            page: 1,
            pageNo: 1,
            total: 20,
            tableData: [],
            loading: false,
            iptList: [
                {
                    inputmod: "",
                    desmod: ""
                }
            ]
        };
    },
    created() {
        this.getUserGroup();
    },
    methods: {
        // 获取用户组列表
        getUserGroup() {
            let params = {
                type: 1,
                page: this.page
            };
            this.loading = true;
            Service.getUserGroup(this, params).then(res => {
                if (res.errorCode === 0) {
                    this.loading = false;
                    this.tableData = res.result.list;
                    this.total = res.result.total;
                }
            });
        },
        // handleCurrentChange 分页
        handleCurrentChange(val) {
            console.log(val);
            this.page = val;
            this.getUserGroup();
        },
        // 新增用户组
        addGroup() {
            // this.dialogVisible = true;
            this.$router.push("/Usergroupadd");
        },
        // 编辑
        editGroup(item) {
            // console.log(item);
            this.$router.push({
                name: "Usergroupadd",
                params: item
            });
            // this.$router.push('/Usergroupadd/add');
        }
    }
};
</script>

<style lang="scss" scoped>
.userGroupPage {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}
header {
    height: 50px;
    font-size: 24px;
    color: #666;
}
.main {
    flex: auto;
    overflow: hidden;
    height: 100%;
}
.main .btn {
    display: flex;
}
.main .table {
    height: 85%;
    overflow: auto;
}
.pageAtion {
    float: right;
}
.form {
    width: 80%;
    height: 300px;
    margin: 0 auto;
}
</style>
